<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="企业名称">
                            <el-input placeholder="请输入" class="inputW" v-model="param.projectName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="success" @click="addBtn">新增企业</el-button>
                            <!--                            <el-button type="primary" @click="exportData">导出</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>

                    <el-table :data="tableData" style="margin-bottom: 40px;width: 100%" :stripe="true" :border="true" size="mini">
                        <el-table-column  prop="username" label="企业账号" align="center" ></el-table-column>
                        <el-table-column prop="projectName" label="企业名称" align="center"></el-table-column>
                        <el-table-column prop="province" label="省" align="center"></el-table-column>
                        <el-table-column prop="city" label="市" align="center"></el-table-column>
                        <el-table-column prop="zone" label="区" align="center"></el-table-column>
                        <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
                        <el-table-column prop="manager" label="联系人" align="center"></el-table-column>
                        <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                        <el-table-column prop="file" label="合同文件" align="center">
                            <template  slot-scope="scope">
                               <div v-if="scope.row.file != null">
                                   <el-button type="primary" @click="downFile(scope.row.file)">下载<i class="el-icon-upload el-icon--right"></i></el-button>
                               </div>
                                <div v-if="scope.row.file == null" style="color: red;">
                                    未上传合同信息<i class="el-icon-error"></i>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template  slot-scope="scope">
                                <el-button @click="showDetail(scope.row)" type="primary" icon="el-icon-edit" round size="mini">
                                    编辑
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="totalCount"
                                   :current-page.sync="param.pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑企业':'增加企业'" :visible.sync="AddVisible" width="85%"  :show-close="false" :close-on-click-modal="false">
            <el-dialog
                    title="定位查询"
                    fullscreen="true"
                    :visible.sync="innerVisible"
                    :before-close="mapClose"
                    append-to-body>
                <div style="width:730px;margin:auto;font-size: 15px">
                    要查询的地址：<input class="mapInput" id="text_" type="text"/>
                    <input type="button" class="mapInput" value="查询" @click="searchByStationName()"/>
                    查询结果(经纬度)：<input class="mapInput" id="result_" type="text"/>
                    <input type="button" class="mapInput" value="确定" @click="innerVisible=false"/>
                    <div id="container"
                         style="position: absolute;
            width: 730px;
            height: 590px;
            border: 1px solid gray;
            overflow:scroll;">
                    </div>
                </div>
            </el-dialog>
            <el-form :model="addForm" ref="addForm">
               <el-row>
                   <template v-if="!editMod">
                   <p style="color: #409EFF">企业账号信息</p>
                   <el-col :span="6">
                       <el-form-item label="企业账号"
                                     prop="userName"
                                     :rules="[
                                     {required:true,message:'请输入企业账号,内容不能为空!',trigger:'blur'}
                            ]">
                           <el-input v-model="addForm.userName" autocomplete="off" style="width: 40%;"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="6">
                       <el-form-item label="密码"
                                     prop="Password"
                                     :rules="[
                                     {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}
                            ]">
                           <el-input type="password" v-model="addForm.Password" autocomplete="off"
                                     style="width: 40%;"></el-input>
                       </el-form-item>

                   </el-col>

                   <el-col :span="6">
                       <el-form-item label="确认密码"
                                     prop="checkPass"
                                     :rules="[
                                     {required:true,message:'请输入密码,内容不能为空!',trigger:'blur'}
                            ]">
                           <el-input v-model="addForm.checkPass" type="password"
                                     style="width: 40%;"></el-input>
                       </el-form-item>
                   </el-col>
                       <el-col :span="6">
                       <el-form-item label="角色"  prop="roleId"
                                     :rules="[
                                     {required:true,message:'请选择角色!',trigger:'blur'}
                            ]">
                           <el-select v-model="addForm.roleId" filterable placeholder="请选择角色">
                               <el-option
                                       v-for="item in roleData"
                                       :key="item.Id"
                                       :label="item.Text"
                                       :value="item.Id">
                               </el-option>

                           </el-select>
                       </el-form-item>
                       </el-col>
                   </template>
                   <p style="color: #409EFF">企业基本信息</p>
                   <el-col :span="12">
                       <el-form-item label="企业名称" prop="projectName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'企业名称不能为空!',trigger:'blur'}
                            ]">
                           <el-input v-model="addForm.projectName" autocomplete="off" ></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="社会信用代码" prop="socialID" :label-width="formLabelWidth" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'社会信用代码不能为空!',trigger:'blur'}]">
                           <el-input v-model="addForm.socialID" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="法人代表:" prop="legalMan" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'法人代表不能为空!',trigger:'blur'}]">
                           <el-input v-model="addForm.legalMan" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="法人电话:" prop="legalPhone" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'法人电话不能为空!',trigger:'blur'}]">
                           <el-input v-model="addForm.legalPhone" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="用户联系人:" prop="manager" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'用户联系人不能为空!',trigger:'blur'}]">
                           <el-input v-model="addForm.manager" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="联系电话:" prop="phone" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'联系电话不能为空!',trigger:'blur'}]">
                           <el-input v-model="addForm.phone" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                   <el-form-item label="所在地:" :label-width="formLabelWidth">
                       <el-col :span="8">
                           <el-select v-model="addForm.province" @change="provinceChange">
                               <el-option
                                       v-for="item in provinceArr"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.name"
                               >
                               </el-option>
                           </el-select>
                       </el-col>
                       <el-col :span="8">
                           <el-select v-model="addForm.city" @change="cityChange">
                               <el-option
                                       v-for="item in cityArr"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.name"
                               >
                               </el-option>
                           </el-select>
                       </el-col>
                       <el-col :span="8">
                           <el-select v-model="addForm.zone" @change="zoneChange">
                               <el-option
                                       v-for="item in zoneArr"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.name"
                               >
                               </el-option>
                           </el-select>
                       </el-col>
                   </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="详细地址:" prop="address" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'详细地址不能为空!',trigger:'blur'}
                            ]">
                           <el-input v-model="addForm.address" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="经度:" prop="lng" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'经度不能为空!',trigger:'blur'}
                            ]">
                           <el-input v-model="addForm.lng" autocomplete="off"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="纬度:" prop="lat" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'纬度不能为空!',trigger:'blur'}
                            ]">
                           <el-input v-model="addForm.lat" autocomplete="off"></el-input>

                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="所属行业" prop="catigory" :label-width="formLabelWidth" :rules="[
                       {required:true,message:'所属行业不能为空!',trigger:'blur'}
                       ]">
                       <el-select v-model="addForm.catigory" filterable placeholder="请选择或搜索行业" style="width: 100%;">
                           <el-option
                                   v-for="item in businessArr"
                                   :key="item.cid"
                                   :label="item.cname"
                                   :value="item.cid">
                           </el-option>
                       </el-select>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-button style="float: right" type="primary" @click="getPosition()">定位</el-button>
                   </el-col>
<el-col :span="24">
    <p style="color: #409EFF">企业合同信息</p>
</el-col>
                   <el-col :span="12">
                       <el-form-item label="签订时间:"
                                     prop="siginTime" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'签订时间不能为空!',trigger:'blur'}
                            ]">
                           <el-date-picker
                                   v-model="addForm.siginTime"
                                   type="datetime"
                                   value-format="yyyy-MM-dd HH:mm:ss"
                                   placeholder="选择日期时间">
                           </el-date-picker>
                           <el-input type="number" min="1" v-model="addForm.years" placeholder="签订年限" style="width: 220px"></el-input>
                       </el-form-item>
                       <el-form-item label="合同编号:"
                                     prop="contractNo" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'合同编号不能为空!',trigger:'blur'}
                            ]" >
                           <el-input  v-model="addForm.contractNo" style="width: 220px"></el-input>
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="*合同文件:" :label-width="formLabelWidth">
                           <el-upload
                                   class="upload-demo"
                                   ref="upload_add"
                                   :action="web_url"
                                   :headers="headers"
                                   :data="addForm"
                                   name="file"
                                   :on-change="fileChange"
                                   :on-success="onSuccess"
                                   :on-error="onError"
                                   :limit="1"
                                   :file-list="fileList"
                                   :auto-upload="false">
                               <div slot="tip" class="el-upload__tip">请正确上传合同图片或word或pdf类似文件，后期会进行文件审核。</div>
                               <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                           </el-upload>
                       </el-form-item>
                   </el-col>
               </el-row>


                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="AddVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveClick()">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
           param:{
               page:1,
               pagesize:10,
               projectName:'',
           },
            roleData:[
                {Text:'集团管理员',Id:10},   {Text:'企业端角色',Id:2},
            ],
            tableData:[],
            totalCount:0,
            formLabelWidth:'120px',
            AddVisible:false,
            innerVisible:false,
            addForm:{},
            provinceArr:[],
            cityArr:[],
            zoneArr:[],
            businessArr:[],
            EditVisible:false,
            editMod: false,
            fileList:[],
            headers:{},
            api:'',
            web_url:'',
        },
        created: function () {
            $('.page').show();
            this.loadData();
            HttpUtil.get('Zone/Child', {parentName: '中国', level: 'province'}).success((res) => {
                this.provinceArr = res.data;
            })
        },
        methods: {
            downFile(file){
                this.$message.success('下载成功');
                window.open( SiteConfig.webApiset + file);
            },
            fileChange(file, fileList) {
                this.fileList = fileList;
            },
            onSuccess(res) {
                // if (res.state == 0) {
                this.$message({
                    message: '保存成功！',
                    type: 'success'
                });
                this.$refs['upload_add'].clearFiles();
                this.fileList = [];
                this.addForm = {};
                this.AddVisible = false;
                this.editMod = false;
                this.loadData();
                // } else {
                //     this.$message({
                //         type: 'error',
                //         message: '报错!' + res.errMsg
                //     });
                // }

            },
            onError(err) {
                this.$message({
                    type: 'error',
                    message: '报错!' + err.errMsg
                });
            },
            getPosition() {
                if (!(this.addForm.province && this.addForm.city && this.addForm.zone && this.addForm.address)){
                    this.$message({
                        type:'warning',
                        message:'地址信息不完善'
                    })
                    return;
                }
                this.innerVisible = true;

                setTimeout(() => {
                    var adrr = this.addForm.province + this.addForm.city + this.addForm.zone;
                    document.getElementById("text_").value = adrr ? adrr : '';
                    this.getMap();

                }, 1);

            },
            mapClose(done) {
                document.getElementById("text_").value = '';
                document.getElementById("result_").value = '';
                done();
            },
            getMap() {
                var map = new BMap.Map("container");
                map.centerAndZoom("杭州", 12);
                map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
                map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
                map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开
                this.localSearch = new BMap.LocalSearch(map);
                this.mapView = map;
                this.searchByStationName();
            },

            searchByStationName() {
                this.mapView.clearOverlays();//清空原来的标注
                var keyword = document.getElementById("text_").value;
                this.localSearch.setSearchCompleteCallback((searchResult) => {
                    var poi = searchResult.getPoi(0);
                    document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
                    this.mapView.centerAndZoom(poi.point, 13);
                    var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度

                    let self = this;
                    marker.addEventListener("dragend", function (e) {
                        self.addForm.lng = marker.getPosition().lng;
                        self.addForm.lat = marker.getPosition().lat;
                        document.getElementById("result_").value = marker.getPosition().lng + "," + marker.getPosition().lat;
                    })

                    marker.addEventListener("click", function () {
                        var content = document.getElementById("text_").value + "<br/><br/>经度：" + marker.getPosition().lng + "<br/>纬度：" + marker.getPosition().lat;
                        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                        this.openInfoWindow(infoWindow);

                    });
                    this.mapView.addOverlay(marker);
                    marker.enableDragging();
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    this.addForm.lng = marker.getPosition().lng;
                    this.addForm.lat = marker.getPosition().lat;
                });
                this.localSearch.search(keyword);
            },
            provinceChange(value) {
                HttpUtil.get('Zone/Child', {parentName: value, level: 'city'}).success((res) => {
                    this.cityArr = res.data;
                })
            },
            cityChange(value) {
                HttpUtil.get('Zone/Child', {parentName: value, level: 'district'}).success((res) => {
                    this.zoneArr = res.data;
                })
            },
            zoneChange(value){

            },
            showDetail(row) {
                this.cityChange(row.city);
                this.provinceChange(row.province);
                this.addForm = {
                    projectName: row.projectName,
                    projectOwner:row.projectOwner,
                    projectNo:row.projectNo,
                    Id:row.Id,
                    catigory:row.catigory,
                    socialID:row.socialID,
                    province:row.province,
                    city:row.city,
                    zone:row.zone,
                    lng:row.lng,
                    lat:row.lat,
                    manager:row.manager,
                    phone:row.phone,
                    address:row.address,
                    legalMan:row.legalMan,
                    legalPhone:row.legalPhone,
                    years:row.years,
                    siginTime:row.siginTime,
                    contractNo:row.contractNo,
                }
                this.web_url = this.api + 'v1/project/Update'
                this.editMod = true;
                this.AddVisible = true;
            },
            addBtn(){
                this.AddVisible = true;
                this.editMod = false;
                this.addForm = {};
                this.web_url = this.api + 'v1/project/Add'
            },
            editClick(row) {
               this.EditVisible = true;
            },
            loadData: function () {
                HttpUtil.get('Project/List',this.param).success((r)=>{
                    if (r.state == 0){
                        this.totalCount = r.total;
                        this.tableData = r.data;
                    }
                })
            },
            exportData() {

            },
            onChangePage(page) {
                 this.param.page = page;
                 this.loadData();
            },
            search: function () {
                this.pageno = 1;
                this.loadData();
            },
            saveClick(){
                if (this.editMod){
                    this.$refs['addForm'].validate((valid)=>{
                        if (valid){
                            if (this.addForm.province && this.addForm.city && this.addForm.zone){
                                if (this.fileList.length==0){
                                    HttpUtil.get('Project/Update', this.addForm).success((res) => {
                                        if (res.state==0){
                                            this.addForm = {};
                                            this.AddVisible = false;
                                            this.editMod = false;
                                            this.loadData();
                                        }else {
                                            this.$message({
                                                type:'error',
                                                message:res.errMsg
                                            })
                                        }

                                    });
                                } else {
                                    this.$refs['upload_add'].submit();
                                }
                            }else {
                                this.$message.warning('请完善省市区信息！')
                            }

                        }
                    })
                } else {
                    this.$refs['addForm'].validate((valid) =>{
                        if (valid){
                            if (this.fileList.length==0){
                                this.$message({
                                    type:"error",
                                    message:'文件不能为空'
                                })
                                return
                            }
                            if (this.addForm.province && this.addForm.city && this.addForm.zone){
                                if (this.addForm.Password !== this.addForm.checkPass) {
                                    this.$message({
                                        type: 'error',
                                        message: '密码不一致'
                                    })
                                }else {
                                    let userInfo = {
                                        Company:'HZKD',
                                        roleId:this.addForm.roleId,
                                        Telephone:this.addForm.phone,
                                        Role:this.addForm.roleId,
                                        userName:this.addForm.userName,
                                        Password:this.addForm.Password,
                                        parentId:SiteConfig.account.id
                                    }
                                    HttpUtil.get('User/Add', userInfo).success((res) => {
                                        if (res.state == 0){
                                            let project = {
                                                projectName: this.addForm.projectName,
                                                siginTime:TimeUtil.convertToString(new Date()).substr(0,10),
                                                projectOwner:res.data,
                                                catigory:this.addForm.catigory,
                                                socialID:this.addForm.socialID,
                                                province:this.addForm.province,
                                                city:this.addForm.city,
                                                zone:this.addForm.zone,
                                                lng:this.addForm.lng,
                                                lat:this.addForm.lat,
                                                manager:this.addForm.manager,
                                                phone:this.addForm.phone,
                                                address:this.addForm.address,
                                                legalMan:this.addForm.legalMan,
                                                legalPhone:this.addForm.legalPhone,
                                            }
                                            this.addForm.country = '中国';
                                            this.addForm.projectOwner = res.data + '';
                                            this.$refs['upload_add'].submit();
                                            // HttpUtil.get('Project/Add', project).success((r) => {
                                            //     if (r.state == 0){
                                            //         this.$message({
                                            //             type: 'success',
                                            //             message: '添加成功'
                                            //         });
                                            //         this.addForm = {};
                                            //         this.AddVisible = false;
                                            //         this.editMod = false;
                                            //         this.loadData();
                                            //     }else {
                                            //         this.$message({
                                            //             type:'error',
                                            //             message:r.errMsg
                                            //         })
                                            //     }
                                            // });
                                        }else {
                                            this.$message({
                                                type:'error',
                                                message:res.errMsg
                                            })
                                        }
                                    })
                                }
                            }else {
                                this.$message.warning('请完善省市区信息！')
                            }
                        }
                    })
                }

            }
        },
        mounted: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            }
            HttpUtil.get('CodeController/BusinessList', {pageno: 1, pagesize: 200}).success((res) => {
                this.businessArr = res.data;
            });
            this.api = SiteConfig.webApi

        }
    });
</script>
</body>
</html>
